---
title: Formatting in a multilingual site
description: Displaying currencies in a site or application that supports several languages.
---

Different languages and locations can have radically different formatting styles when it comes to money. For example, ten U.S. dollars in American English should be written down "$10.00". However, in Canadian French, the same amount would be "10,00 $ US".

Dinero.js provides a [`toFormat`](/docs/api/formatting/to-format) function that gives you full control over how to format a Dinero object. Yet, if you're working on a multilingual site or app, such as a booking site for a hotel, **you might want to rely on established formatting conventions.**

## Building a custom Internationalization formatter

ECMAScript provides an [Internationalization API](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl) (`Intl`) that lets you natively format monetary values into a given language by passing a locale. You can create your own `Intl` formatter by wrapping `toFormat`.

```js
import { dinero, toFormat } from 'dinero.js';
import { USD } from '@dinero.js/currencies';

function intlFormat(dineroObject, locale, options = {}) {
  function transformer({ amount, currency }) {
    return amount.toLocaleString(locale, {
      ...options,
      style: 'currency',
      currency: currency.code,
    });
  };

  return toFormat(dineroObject, transformer);
};

const d = dinero({ amount: 1000, currency: USD });

intlFormat(d, 'en-US'); // "$10.00"
intlFormat(d, 'fr-CA'); // "10,00 $ US"
```

<Alert type="warning">

**The Internationalization API has different implementations across different runtimes. It's also not available in every environment.**

When using it in the browser, make sure to load the appropriate [polyfill](https://polyfill.io/) depending on your target browsers. When using in Node.js, make sure to embed the [full International Components for Unicode (ICU)](https://nodejs.org/api/intl.html#intl_embed_the_entire_icu_full_icu).

</Alert>

## Using the custom formatter

You can use the formatter to display monetary values differently according to the current language of your site or app. For example, a React implementation could look like the following.

```jsx
import React from 'react';
import { dinero } from 'dinero.js';
import { USD } from '@dinero.js/currencies';

import { intlFormat } from './intlFormat';

const languages = [
  {
    label: 'English (U.S.)',
    locale: 'en-US',
  },
  {
    label: 'Français (Canada)',
    locale: 'fr-CA',
  },
];

function App() {
  const [defaultLanguage] = locales;
  const [language, setLanguage] = React.useState(defaultLanguage);

  const price = dinero({ amount: 1000, currency: USD });

  return (
    <>
      <select
        value={language.locale}
        onChange={(event) => setLanguage(event.target.value)}
      >
        {languages.map(({ label, locale }) => (
          <option key={locale} value={locale}>
            {label}
          </option>
        ))}
      </select>
      <p>Price: {intlFormat(price, language.locale)}</p>
    </>
  );
}
```
